import React, { useState, useEffect } from 'react';
import { Button, Input } from 'antd';
import styles from './index.less';
var value,
  orig1,
  orig2,
  dv,
  panes = 2,
  highlight = true,
  connect = null,
  collapse = false;

function kInit() {
  CodeMirror.k_init = function(id, newData, oldData) {
    value = oldData; //左侧 老文件
    orig1 = '';
    orig2 = newData; //右侧 新文件
    initUI();

    function initUI() {
      if (value == null) return;
      var target = document.getElementById(id);
      target.innerHTML = '';
      var dv = CodeMirror.MergeView(target, {
        value: value,
        origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
        orig: orig2,
        lineNumbers: true, //行号
        mode: 'text/html',
        //theme:'3024-night',//修改主题
        styleActiveLine: true,
        matchBrackets: true,
        highlightDifferences: highlight,
        connect: connect,
        collapseIdentical: collapse,
        revertButtons: false, //事件比较替换
      });
    }
  };
}

var left = `asdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
asdasdasdasdas
asdasdasdasdsad`;
var right = `asdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsadasdasd
asdasdasd
asdasdasd
2222222
asdasdasdasdsad`;

// 远程加载js （按需引入）
function loadCodemirror(callback) {
  var urls = [
    // css
    '/lib/codemirror-5.31.0/lib/codemirror.css',
    '/lib/codemirror-5.31.0/addon/fold/foldgutter.css',
    '/lib/codemirror-5.31.0/addon/hint/show-hint.css',
    '/lib/codemirror-5.31.0/addon/lint/lint.css',
    '/lib/codemirror-5.31.0/addon/merge/merge.css',
    '/lib/codemirror-5.31.0/addon/display/fullscreen.css',
    '/lib/codemirror-5.31.0/theme/monokai.css',
    '/lib/codemirror-5.31.0/theme/eclipse.css',
    '/lib/codemirror-5.31.0/theme/midnight.css',

    // js
    '/lib/codemirror-5.31.0/lib/codemirror.js',
    '/lib/codemirror-5.31.0/addon/comment/comment.js',
    '/lib/codemirror-5.31.0/addon/selection/active-line.js',
    '/lib/codemirror-5.31.0/keymap/sublime.js',
    '/lib/codemirror-5.31.0/addon/hint/show-hint.js',
    '/lib/codemirror-5.31.0/addon/hint/sql-hint.js',
    '/lib/codemirror-5.31.0/mode/python/python.js',
    '/lib/codemirror-5.31.0/mode/sql/sql.js',
    '/lib/codemirror-5.31.0/addon/fold/foldcode.js',
    '/lib/codemirror-5.31.0/addon/fold/foldgutter.js',
    '/lib/codemirror-5.31.0/addon/fold/brace-fold.js',
    '/lib/codemirror-5.31.0/addon/fold/indent-fold.js',
    '/lib/codemirror-5.31.0/addon/fold/comment-fold.js',
    '/lib/codemirror-5.31.0/addon/edit/closebrackets.js',
    '/lib/codemirror-5.31.0/addon/edit/matchbrackets.js',
    '/lib/codemirror-5.31.0/mode/clike/clike.js',
    '/lib/codemirror-5.31.0/addon/display/autorefresh.js',
    '/lib/codemirror-5.31.0/addon/display/fullscreen.js',
    '/lib/codemirror-5.31.0/addon/merge/merge.js',
    'http://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js',
  ];

  loadjs(urls, {
    async: false,
    success: function() {
      callback();
    },
  });
}

export default class extends React.Component {
  componentDidMount = () => {
    loadCodemirror(() => {
      kInit();
      console.log('加载完成');
      CodeMirror.k_init('codeMirror', left, right);
    });
  };
  initEditor = () => {};

  onFinish = async values => {
    console.log(values);
  };

  getFormData = async () => {
    const children = [
      { name: '规则编号', type: 'input', rules: [] },
      {
        name: '目前状态',
        type: 'select',
        rules: [],
        option: { key: 1, value: 'hhh', key: 2, value: '222' },
      },
      { name: 'test111', type: 'input', rules: [] },
      { name: 'test333', type: 'input', rules: [] },
      { name: 'test222', type: 'input', rules: [] },
      { name: '对方的身份', type: 'select', rules: [] },
      { name: 'study', type: 'input', rules: [] },
      { name: '还有同款吗', type: 'input', rules: [] },
    ];
  };

  render() {
    return (
      <div className={styles.page}>
        <div className={styles.editor} id="codeMirror"></div>
      </div>
    );
  }
}
